<template>
	<view class="content">
		<view class="info-block">
			<view class="head-img">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
					hover-class="none">
					<image :src="form.faceUrl?form.faceUrl:'/static/mine/user_photo.png'" class="mine-img">
					</image>
				</button>
			</view>
			<view class="name">
				<view class="title">昵称</view>
				<input type="nickname" class="mine-name" :value="form.userName" placeholder="请输入昵称" @blur="bindblur"
					@input="bindinput" />
			</view>
			<view @click="handleSave" class="btn">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		updateUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					userName: ''
				},
				rules: {
					faceUrl: {
						name: '头像',
						required: true,
					},
					userName: {
						name: '昵称',
						required: true,
					},
				}
			}
		},
		methods: {
			bindblur(e) {
				this.form.userName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.form.userName = e.detail.value;
			},
			onChooseavatar(e) {
				let loginInfo = getStorage('login');
				const filePath = e.detail.avatarUrl;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.uploadFile({
					url: 'https://gz.yshj.minshengjiandu.com/api/upload',
					name: 'file',
					formData: {},
					filePath: filePath,
					header: {
						'authori-zation': loginInfo.token
					},
					success: (res) => {
						const data = JSON.parse(res.data);
						uni.hideLoading()
						if (data.code == 200) {
							this.showToast('上传成功')
							this.form.faceUrl = data.data
						} else {
							this.showToast(data.msg)
						}
					},
					fail: (res) => {
						uni.hideLoading()
						this.showToast('上传失败');
					}
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					if (this.form.userName == '游客') {
						this.showToast('请修改昵称');
						return;
					}
					if (this.form.faceUrl == '/static/mine/user_photo.png') {
						this.showToast('请修改头像');
						return;
					}
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					updateUser({
						faceUrl: this.form.faceUrl,
						userName: this.form.userName,
						mobile: this.form.mobile
					}).then((res) => {
						uni.hideLoading()
						let oldUser = getStorage('login');
						oldUser.userName = this.form.userName
						oldUser.faceUrl = this.form.faceUrl
						setStorage('login', oldUser)
						this.showToast('保存成功', () => {
							uni.switchTab({
								url: '/pages/mine/index'
							})
						})
					}).catch(() => {
						uni.hideLoading()
						this.showToast('保存失败');
					})
				}
			}
		},
		onShow() {
			const loginInfo = getStorage('login');
			if (loginInfo) {
				this.form = loginInfo
			}
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		background: #FFFFFF;

		.info-block {
			display: flex;
			flex-direction: column;
			background: #fff;
			margin-top: 30rpx;
			height: auto;
			padding: 30rpx;

			.head-img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;



				.avatar-wrapper {
					margin-bottom: 30rpx;
					background: none;

					.mine-img {
						align-items: center;
						width: 180rpx;
						height: 180rpx;
						border-radius: 50%;
						background: #F5F5F5;
					}

					&::after {
						border: none;
					}
				}
			}

			.name {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-top: 1rpx solid #f5f5f5;
				border-bottom: 1rpx solid #f5f5f5;
				margin-bottom: 30rpx;
				text-align: center;
				height: 80rpx;


				.title {
					margin-right: 30rpx;
				}

				.mine-name {
					height: 80rpx;
				}
			}

			.btn {
				width: 350rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #117DFF;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}
	}
</style>